<!--
 * @Description: PC端欢迎组件
 * @Author: liushiji
 * @LastEditors: seadon
 * @Date: 2021-07-12 11:31:28
 * @LastEditTime: 2022-03-31 09:53:57
-->
<template>
	<div>
		<BasicLayout></BasicLayout>
		<div class="desktop-login">
			<div class="desktop-login-lang">
				<a-dropdown trigger="click" placement="bottomRight">
					<span class="lang-active" @click.prevent>
						<i class="low-code iconsupplier_web_normal lang-icon"></i>
						{{ currentValue.name }}
						<i class="low-code iconxiangyou1 lang-icon"></i>
					</span>
					<template #overlay>
						<div class="lang-list">
							<span
								v-for="(lang, index) in language"
								:key="index"
								class="lang-list-item"
								:class="{ active: lang.value === currentValue.value }"
								@click="changeLocale(lang)"
								>{{ lang.name }}</span
							>
						</div>
					</template>
				</a-dropdown>
			</div>
			<div class="title">
				<p>{{ invitee }}，{{ t.welcome }}！</p>
				<p>{{ t.bindPhone }}</p>
			</div>
			<div class="inputs">
				<label for="phone">{{ t.phoneNum }}</label>
				<input
					id="phone"
					v-model="phoneNumber"
					:placeholder="t.inputNum"
					type="text"
				/>
				<label for="code">{{ t.code }}</label>
				<div class="code-container">
					<input
						id="code"
						v-model="codeValue"
						:placeholder="t.inputCode"
						type="text"
						maxlength="6"
						autocomplete="off"
					/>
					<button
						class="code-btn"
						:class="{ 'request-disabled': requestDisabled }"
						:disabled="requestDisabled"
						@click="onOpen"
					>
						{{ requestDisabled ? restTime : t.send }}
					</button>
				</div>
				<button
					class="bind-login"
					:class="{ 'login-disabled': isDisabled }"
					:disabled="isDisabled"
					@click="login"
				>
					{{ t.bindLogin }}
				</button>
			</div>
			<p class="agreement" v-if="!isPtm">
				{{ t.agree }}
				<a
					href="https://fe-resource.baiteda.com/services-statement/v1.0/services.html"
					target="_blank"
					>《{{ t.useAgreement }}》</a
				>
				{{ t.and }}
				<a
					href="https://fe-resource.baiteda.com/services-statement/v1.0/privacy.html"
					target="_blank"
					>《{{ t.privacyAgreement }}》</a
				>
			</p>
			<Vcode :show="isShow" @success="getCode" @close="onClose" :imgs="imgs" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { t } from '@/constant/welcome'
import { useWelcome } from './hooks'
import { message } from 'ant-design-vue'
import Vcode from 'vue3-puzzle-vcode'
import BasicLayout from '@/entry_desktop/layouts/BasicLayout.vue'
import axios from 'axios'
const {
	currentValue,
	language,
	changeLocale,
	isDisabled,
	codeValue,
	requestDisabled,
	restTime,
	getCode,
	login,
	phoneNumber,
	invitee,
	isShow,
	onOpen,
	onClose,
	imgs,
} = useWelcome(message)
const isPtm = ref(false)
onMounted(async () => {
	let res = await axios({
		method: 'POST',
		url: `/ego_base_info/api/public/tenant/getPlatformInfo`,
	})
	if (res.data.code === '000000') {
		isPtm.value =
			res.data.data.create_source === 'PTM' && res.data.data.pas_status
	} else {
		isPtm.value = false
	}
})
</script>

<style lang="less" scoped>
// 特殊字体颜色
@logo-text: #303142;
@btn-color: #4c78fc;
@btn-hover: #658bfc;
@btn-active: #466feb;

.error {
	position: fixed;
	top: 70px;
	left: 0;
	right: 0;
	height: 48px;
	margin: 0 auto;
	margin-top: -24px;
}

.desktop-login {
	width: 458px;
	border-radius: 12px;
	background: #ffffff;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-left: -229px;
	margin-top: -270px;
	padding: 0 64px 32px;
	filter: drop-shadow(0 10px 10px #bac5e34d);

	.ant-input-suffix {
		position: absolute;
		right: 8px;
		height: 100%;
	}

	&-lang {
		position: absolute;
		right: 32px;
		top: 28px;

		.lang-active {
			width: 100%;
			height: 24px;
			line-height: 24px;
			color: @rok-text-color-secondary;
			font-size: 12px;
			display: inline-block;
			text-align: right;
			cursor: pointer;

			.lang-icon {
				font-size: 12px;
			}
		}
	}

	.title {
		margin-top: 84px;
		margin-bottom: 30px;

		p {
			margin: 0;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 500;
			font-size: 24px;
			line-height: 36px;
			text-align: center;
			letter-spacing: 0.01em;
			color: #1f2329;
		}

		& :last-child {
			font-family: PingFang SC;
			font-style: normal;
			font-weight: normal;
			font-size: 16px;
			line-height: 36px;
			text-align: center;
			letter-spacing: 0.01em;
			color: #646a73;
		}
	}

	.inputs {
		label {
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 500;
			font-size: 12px;
			line-height: 20px;
			color: #646a73;
			display: block;
		}

		input {
			border: 0;
			outline: none;
			border-bottom: 1px solid #dee0e3;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: normal;
			font-size: 14px;
			line-height: 20px;
			color: #8f959e;
			padding: 7px 0;
			box-shadow: inset 0 0 0 1000px white !important;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			border-radius: 0;
		}

		#phone {
			color: black;
			margin-bottom: 25px;
			width: 100%;
		}

		.code-container {
			display: flex;
			justify-content: space-between;
			width: 100%;

			#code {
				color: black;
				flex: 1;
				overflow: hidden;
			}

			.code-btn {
				width: 110px;
				height: 42px;
				background: @btn-color;
				border-radius: 4px;
				margin-left: 30px;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 500;
				font-size: 14px;
				line-height: 20px;
				text-align: center;
				color: #ffffff;
				border: 0;
				cursor: pointer;

				&:hover {
					background: @btn-hover;
				}

				&:active {
					background: @btn-active;
				}
			}

			.request-disabled {
				color: #646a73;
				background: #f5f6f7;
				cursor: auto;

				&:hover {
					background: #f5f6f7;
					color: #646a73;
				}
			}
		}

		.bind-login {
			margin-top: 25px;
			width: 100%;
			height: 42px;
			background: #4c78fc;
			border-radius: 4px;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 500;
			font-size: 14px;
			line-height: 20px;
			text-align: center;
			color: #ffffff;
			border: 0;

			&:hover {
				background: @btn-hover;
				cursor: pointer;
			}

			&:active {
				background: @btn-active;
			}
		}

		.login-disabled {
			background: @btn-hover;
			opacity: 0.5;
			border-radius: 4px;
			cursor: not-allowed !important;

			&:hover {
				background-color: @btn-hover;
			}
		}
	}

	.agreement {
		margin-top: 25px;
		margin-bottom: 35px;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		line-height: 18px;
		text-align: left;
		color: #646a73;

		a {
			color: @btn-color;
			cursor: pointer;
			text-decoration: none;

			&:hover {
				color: @btn-hover;
			}

			&:active {
				color: @btn-active;
			}
		}
	}
}

.lang-list {
	width: 116px;
	padding: 8px 0;
	background: @rok-white-bg;
	box-shadow: 0px 4px 20px rgba(106, 114, 146, 0.2);
	border-radius: 2px;

	&-item {
		display: inline-block;
		height: 32px;
		line-height: 32px;
		cursor: pointer;
		width: 100%;
		padding: 0 18px;

		&:hover {
			background: @rok-hover-color;
		}
	}

	.active {
		position: relative;
	}

	.active::after {
		content: '';
		width: 2px;
		height: 32px;
		background: @rok-primary-color;
		position: absolute;
		left: 0;
		top: 0;
	}
}
</style>
